/* You can add global styles to this file, and also import other style files */
@use '@angular/material' as mat;
// bootstrap
html {
  box-sizing: border-box;
  -ms-overflow-style: scrollbar;
}
*,
*::before,
*::after {
  box-sizing: inherit;
}
@import 'bootstrap/scss/bootstrap-grid';
@import 'bootstrap/scss/mixins';
@import 'bootstrap/scss/root';
@import 'bootstrap/scss/forms';
@import 'bootstrap/scss/buttons';
@import 'bootstrap/scss/card';
@import 'bootstrap/scss/alert';

legend {
  margin-bottom: 20px;
  font-size: 21px;
  border-bottom: 1px solid #e5e5e5;
}

// highlight.js
@import 'highlight.js/styles/github.css';

// material

@import './app/shared/example-viewer/example-viewer-theme';
@include mat.core();
$typography: mat.m2-define-typography-config();
@include mat.typography-hierarchy($typography);

// Define a theme.
$matPrimary: mat.m2-define-palette(mat.$m2-blue-grey-palette, 900);
$matAccent: mat.m2-define-palette(mat.$m2-pink-palette, A200, A100, A400);

$theme: mat.m2-define-light-theme($matPrimary, $matAccent);

// Include all theme styles for the components.
@include mat.all-component-themes($theme);
@include example-viewer-theme($theme);

pre {
  display: block;
  padding: 9.5px;
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.42857143;
  color: #333;
  word-break: break-all;
  word-wrap: break-word;
  background-color: #f5f5f5;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.active-link {
  color: map_get(mat.$m2-blue-grey-palette, 900) !important;
}

@import './markdown.css';

// ag-grid
@import 'ag-grid-community/styles/ag-grid.css';
@import 'ag-grid-community/styles/ag-theme-material.css';

footer {
  font-size: 85%;
  text-align: center;
  background-color: white;
  display: flex;
  justify-content: space-between;
  @include media-breakpoint-down(sm) {
    flex-direction: column;
  }

  a {
    font-weight: 500;
    color: $gray-700;

    &:hover,
    &:focus {
      color: $link-color;
    }
  }

  p {
    margin-bottom: 0;
  }

  @include media-breakpoint-up(sm) {
    text-align: left;
  }

  .bd-footer-logo {
    display: flex;
    flex-direction: column;
    align-items: center;

    .bd-footer-logo-text {
      position: relative;
      &::after {
        content: '.dev';
        font-size: smaller;
        position: absolute;
        bottom: -11px;
        right: 0px;
      }
    }
  }

  .bd-footer-badges {
    display: flex;
    justify-content: flex-end;
  }

  .bd-footer-links {
    padding-left: 0;
    margin-bottom: 1rem;

    li {
      display: inline-block;

      + li {
        margin-left: 1rem;
      }
    }
  }
}

.text-muted {
  color: #6c757d !important;
}
